<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>高血压筛查</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="../assets/js/views/vue.min.js"></script>
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <link rel="stylesheet" href="../assets/css/views/question/question.css">
    <style>
        .questions ul li{
            margin-top:0px;
        }
        h1{
            line-height:60px;
            margin:0 !important;
            padding:0 !important;
        }
        .btn{
            width:100px !important;
        }
        .acttive_btn{
            background:#DDDDDD !important;
            color:black !important;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div class="content" id="main">
    <div class="contianer">
        <h1>问卷调查</h1>
        <div class="situation">
            <ul>
                <li v-for="item in subtitleId" :class="item.classname">
                    <span :title="item.id">{{item.subtitle}}</span>
                </li>
            </ul>
        </div>
        <div class="questions" style="margin-top:40px;">
            <ul>
                <li v-for="item in questions" class="subject" :title="item.id">
                    <h2 for="question">{{item.question}}
                        <span style="color:red;" v-if="item.state === 1" >*</span>
                        <span style="color:red;" v-else></span>
                    </h2>
                    <form class="fromId">
                        <div class="check" v-for="itm in item.options" class="sub">
                            <input :type="item.check" :id="itm.id" :name="item.question" disabled="disabled">
                            <label :for="itm.id">{{itm.text}}</label>
                        </div>
                    </form>
                </li>
            </ul>
        </div>
        <div style="width:450px;margin:0 auto;">
            <div style="width:200px;display:inline-block;margin-right:30px;">
                <button class="btn prev" id="submit" @click="prev">上一页</button>
            </div>
            <div style="width:200px;display:inline-block">
                <button class="btn next" id="submit" @click="submit()">下一页</button>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el : '#main',
        data : {
            type : '',
            titleId : '',
            subtitle : '',
            subtitleId:[],
            questions : [],
            situation:[],
            id:'',
            idcard:'',
            patientId:'',
            num : 0
        },
        methods : {
            title : function(){
                let that = this
                $.ajax ({
                    url : '${URL_QUESTIONNAIRE_SUBTITLES}',
                    data : {
                        titleId : that.titleId
                    },
                    dataType : 'json',
                    type : 'post',
                    success : function (data){
                        for( var a = 0; a < data.data.length; a++ ){
                            that.subtitle = data.data[that.num].id
                            if( that.num == '0' ){
                                data.data[a].classname = 'otherunactive'
                                data.data[0].classname = 'active_title'
                            }else{
                                data.data[a].classname = 'otherunactive'
                                data.data[that.num].classname = 'otheractive'
                                data.data[0].classname = 'unative_title'
                            }
                        }
                        that.subtitleId = data.data;
                        $('input').removeAttr("checked")
                        $.ajax({
                            url:"${URL_QUESTIONNAIRE_RESULITS}",
                            dataType:'json',
                            type:"post",
                            data:{
                                recordId:that.id,
                                subtitleId:that.subtitleId[that.num].id
                            },
                            success:function(data){
                                // 清空选择
                                setTimeout(function(){
                                    var subject = $('.subject')
                                    for( var a =0; a < subject.length; a++ ){
                                        for( var i = 0; i < data.data.length; i++ ){
                                            if( $(subject[a]).attr('title') == data.data[i].questionId ){
                                                var inputs = $(subject[a]).find('input')
                                                inputs[data.data[i].option].checked = true
                                            }
                                        }
                                    }
                                },500)
                                if( that.num === 0 ){
                                    $('.prev').attr('disabled',true).addClass('acttive_btn')
                                }else if( that.num === that.situation.length - 1 ){
                                    $('.next').attr('disabled',true).addClass('acttive_btn')
                                }else{
                                    $('.prev').attr('disabled',false).removeClass('acttive_btn')
                                    $('.next').attr('disabled',false).removeClass('acttive_btn')
                                }
                            }
                        })
                        return that.play()
                    }
                })
            },
            play : function(){
                let that = this;
                return that.subtitles()
            },
            subtitles : function(){
                let that = this;
                $.ajax ({
                    url : '${URL_QUESTIONNAIRE_QUESTIONS}',
                    data : {
                        subtitleId : that.subtitle
                    },
                    dataType : "json",
                    type : 'post',
                    success : function(data){
                        for( var a = 0; a < data.data.length; a++ ){
                            data.data[a].num = a+1
                            data.data[a].options = data.data[a].options.reverse()
                            if( data.data[a].type == '1' ){
                                data.data[a].check = 'radio'
                            }else if( data.data[a].type == '2' ){
                                data.data[a].check = 'check'
                            }
                        }
                        that.questions = data.data
                    }
                })
            },
            submit : function(){
                let that = this;
                // 获取当前所有题目的节点
                // 判断所有题目是否都有选择
                var subject = $('.subject')
                var inputs;
                if( that.num === that.situation.length - 1 ){
                    return
                }else{
                    that.num ++
                    $('.prev').attr('disabled',false).removeClass('acttive_btn')
                    that.title()
                }
            },
            prev:function(){
                let that = this;
                // 获取本地数据
                // 遍历并显示选择框
                if( that.num <= 0 ){
                    that.num = 0
                    $('.prev').attr('disabled',true)
                    return
                }else{
                    that.num --;
                    that.title()
                }
            }
        },
        created(){
            let that = this;
            // 初始化获取当前id
            var href = location.search;
            that.idcard = href.split('?')[1].split('&')[1].split('=')[1]
            that.titleId = href.split('?')[1].split('&')[0].split('=')[1]
            that.patientId = href.split('?')[1].split('&')[2].split('=')[1]
            that.id = href.split('?')[1].split('&')[3].split('=')[1]
            that.title()
            setTimeout(function() {
                that.situation = $('.situation ul li')
            },500)
            $('.prev').attr('disabled',true).addClass('acttive_btn')
        }
    })
</script>
</script>
</body>
</html>
